import React, { Component } from 'react'
import { withRouter } from 'react-router-dom';
import { NavBar, Icon, SearchBar } from 'antd-mobile';
import './index.css';
import Axios from '../../untils/myaxios'
class SearchCenter extends Component {
  state = {
    inputVal: '',
    product_list: []
  }
  getProducts = () => {
    Axios.get('goods/qsearch', {
      params: {
        query: this.state.inputVal
      }
    })
      .then(res => {
        console.log(res)
        this.setState({
          product_list: res
        })
      })
      .catch(err => {
        console.error(err);
      })
  }
  getProductDetail = (e) => {
    let goods_id = e.target.getAttribute('data-goods_id');
    this.props.history.push('/goodDetail/' + goods_id)
  }

  render() {
    return (
      <div className="yg-searchCenter">
        {/* 搜索中心导航开始 */}
        <NavBar className="yg-sc-nav"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >搜索中心</NavBar>
        {/* 搜索中心导航结束*/}
        {/* 搜索框开始 */}
        <div className="yg-sc-input">
          <SearchBar
            className="yg-sc-inputValue"
            placeholder="Search"
            value={this.state.inputVal}
            // onSubmit={value => console.log(value, 'onSubmit')}
            // onClear={value => console.log(value, 'onClear')}
            // onFocus={() => console.log('onFocus')}
            // onBlur={() => console.log('onBlur')}
            onCancel={() => this.getProducts()}
            showCancelButton
            cancelText="搜索"
            onChange={(value) => {
              this.setState({
                inputVal: value
              })
            }}
          />
        </div>
        {/* 搜索框结束 */}
        {/* 搜索内容列表开始 */}
        <div className="yg-sc-list" onClick={this.getProductDetail}>
          {this.state.product_list.map((v, i) => {
            return (
              <div className="sc-item" key={i} data-goods_id={v.goods_id}>
                <img src="https://img14.360buyimg.com/n0/jfs/t1/134590/13/7964/93438/5f439226E913d0598/7c18c775f7d23e50.jpg" alt="" />
                <div className="title">{v.goods_name}</div>
              </div>
            )
          })}
        </div>
        {/* 搜索内容列表结束 */}
      </div>
    )
  }
}
export default withRouter(SearchCenter)